<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="include/common-header :: common_header(~{::title},~{::link})">
    <title>预约规则</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<!--页面内容开始-->
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>我的工作总览 </h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="table-responsive col-md-8">
                            <div id="calendar"></div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    工作明细
                                    <small class="m-l-sx" id="myappointimemainList_date"></small>
                                    <div class="pull-right">
                                    <a href="#" class="card-link"
                                       onclick="myappointimemainListObj.userHandler()">生成明细</a>
                                    <a href="#" class="card-link"
                                       onclick="myappointimemainListObj.userHandler()">暂停</a>
                                    <a href="#" class="card-link"
                                       onclick="myappointimemainListObj.userHandler()">启用</a>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <table id="appointimemainList_table" class="table table-striped"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页面内容结束-->

<script type="text/javascript">
    $().ready(function () {
        myappointimemainListObj.myCalendar = $('#calendar').fullCalendar({
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            locale: 'zh-cn',
            selectable: true,
            header: {
                left: 'title',
                center: '',
                right: 'today prev,next'
            },
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '日',
                list: 'list'
            },
            events: function (start, end, timezone, callback) {
                var myStart = moment(start).format('YYYY-MM-DD')
                var myEnd = moment(end).format('YYYY-MM-DD')
                $.myPost({
                    url: '/appoin/appointimemain/my/workInterval',
                    dataType: 'json',
                    data: {
                        startDate: myStart,
                        endDate: myEnd
                    },
                    success: function (data) {
                        if (data && data.code === 0) {
                            callback(data.list);
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            },
            dayClick: function (date, jsEvent, view) {
                myappointimemainListObj.dateHandler(date.format());
                //$(this).css('background-color', 'red');

            }
        });
        $('#appointimemainList_table').bootstrapTable({
            method: 'post',
            formatNoMatches: function () {  //没有匹配的结果
                return '暂无数据';
            },
            queryParams: function (param) {
                return param;
            },
            columns: [{
                title: '#',
                align: 'center',
                width: 50,
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                title: '工作时间',
                field: 'userName'
            }, {
                title: '预约人',
                field: 'isActive'
            }, {
                title: '操作',
                field: 'action',
                events: {
                    'click .pause': function (e, value, row, index) {
                        myappointimemainListObj.pauseHandler(row.id)
                    },
                    'click .play': function (e, value, row, index) {
                        myappointimemainListObj.playHandler(row.id)
                    },
                    'click .list': function (e, value, row, index) {
                        appointimemainTimerObj.init(row.id)
                    },
                    'click .save': function (e, value, row, index) {
                        myappointimemainListObj.saveDetailHandler(row.id, row.userName)
                    }
                },
                formatter: function (value, row, index) {
                    var opers = [];
                    if (row.workTimeCount == 0) {
                        opers.push(`<a class="save btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="生成工作时间">
                                    <i class="fa fa-save"></i>
                                </a>`)
                    } else {
                        opers.push(`<a class="list btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="查看明细">
                                    <i class="fa fa-list"></i>
                                </a>`)
                        if (row.isActive) {
                            opers.push(`<a class="pause btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="暂停">
                                    <i class="fa fa-pause"></i>
                                </a>`)
                        } else {
                            opers.push(`<a class="play btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="启用">
                                    <i class="fa fa-play"></i>
                                </a>`)
                        }
                    }
                    return opers.join('');
                }
            }],
            responseHandler: function (res) {
                return res.list;
            },
            onLoadSuccess: function (data) {
                $('[data-toggle="tooltip"]').tooltip()
            }
        });
        // 显示今天工作人员
        let now = new Date();
        myappointimemainListObj.dateHandler(now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate());
    })
    var myappointimemainListObj = new Object({
        seletDate: undefined,
        myCalendar: undefined,
        refreshList: function () {
            $('#appointimemainList_table').bootstrapTable('refresh', {
                url: '/appoin/appointimemain/workUserList',
                query: {
                    appoinDate: myappointimemainListObj.seletDate
                }
            });
        },
        dateHandler: function (dateStr) {
            this.seletDate = dateStr;
            $('#appointimemainList_date').text(this.seletDate);
            myappointimemainListObj.refreshList();
        },
        userHandler: function () {
            if (!myappointimemainListObj.seletDate) {
                $.mySwalWarn("请选择日期");
                return;
            }
            appointimemainUserObj.init(myappointimemainListObj.seletDate);
        },
        pauseHandler: function (id) {
            $.myPost({
                url: `/appoin/appointimemain/saveWorkState/pause/${id}`,
                success: function (data) {
                    if (data && data.code === 0) {
                        toastr.success(data.msg, '操作提示')
                        myappointimemainListObj.refreshList();
                    } else {
                        toastr.error(data.msg, '操作失败')
                    }
                }
            })
        },
        playHandler: function (id) {
            $.myPost({
                url: `/appoin/appointimemain/saveWorkState/play/${id}`,
                success: function (data) {
                    if (data && data.code === 0) {
                        toastr.success(data.msg, '操作提示')
                        myappointimemainListObj.refreshList();
                    } else {
                        toastr.error(data.msg, '操作失败')
                    }
                }
            })
        },
        saveDetailHandler: function (id, userName) {
            $.mySwalConfirm(`将为${userName}生成[${myappointimemainListObj.seletDate}]工作时间，确认吗？`, function () {
                $.myPost({
                    url: `/appoin/appointimemain/detail/save/${id}`,
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            myappointimemainListObj.refreshList();
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            });
        },
        updateCalendarEvent: function(){
            let event = {
                title  : 'event1',
                start  : '2020-09-26'
            };
            myappointimemainListObj.myCalendar.fullCalendar('updateEvent', event);
        },
        refreshDataList: function () {
            $('#appointimemainList_table').bootstrapTable('refresh');
        }
    })
</script>
</body>
</html>